/*
 * @Author: taoyuqing
 * @Date: 2023-02-26 19:08:56
 * @Description: 
 */
import 'package:flutter/material.dart';
import 'package:spree/utils/utils.dart';
import 'package:spree/widgets/common_container.dart';
import 'package:spree/widgets/vip_content_box.dart';
import 'package:spree/widgets/vip_rectangle_box.dart';

import '../../rules_banner.dart';

class MinesRules extends StatefulWidget {
  MinesRules({Key? key}) : super(key: key);

  @override
  State<MinesRules> createState() => _MinesRulesState();
}

class _MinesRulesState extends State<MinesRules> with TickerProviderStateMixin {
  int _curIndex = 0;
  late TabController _tabController;
  final GlobalKey<RulesBannerState> _globalKey = GlobalKey();
  List _tabs = ["Rules", "Limites"];
  int _fIndex = 0;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: _tabs.length, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: CommonContainer(
        child: ListView(
          padding: EdgeInsets.only(top: 20, bottom: 20),
          children: [
            TabBar(
              controller: _tabController,
              tabs: _tabs.map((e) => Tab(text: e)).toList(),
              onTap: (i) {
                setState(() {
                  _fIndex = i;
                });
              },
            ),
            _fIndex == 0
                ? Column(
                    children: [
                      RulesBanner(
                        key: _globalKey,
                        height: 380,
                        index: _curIndex,
                        onchange: (i) {
                          setState(() {
                            _curIndex = i;
                          });
                        },
                        imageList: [
                          Column(
                            children: [
                              Container(
                                padding: EdgeInsets.fromLTRB(10, 20, 10, 20),
                                width: Utils().getScreenWidth(context),
                                decoration: BoxDecoration(
                                  color: Color(0xFF291F62),
                                  borderRadius: const BorderRadius.all(
                                      Radius.circular(8.0)),
                                ),
                                child: Column(
                                  children: [
                                    Image.asset(
                                        'images/games/mines/mines-info1.png'),
                                    Container(
                                      margin: EdgeInsets.only(top: 10),
                                      child: Image.asset(
                                          'images/games/mines/mines-info2.png'),
                                    ),
                                    Container(
                                      height: 40,
                                      margin: EdgeInsets.only(top: 20),
                                      child: ElevatedButton(
                                          style: ButtonStyle(
                                            backgroundColor:
                                                MaterialStateProperty.all(
                                                    Color(0xFFF93C56)),
                                          ),
                                          onPressed: () {
                                            Navigator.pop(context);
                                          },
                                          child: Text('To Bet')),
                                    ),
                                  ],
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 20),
                                child: Text(
                                  'Place a bet, choose the amount of bombs and press "Bet"',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                      fontWeight: FontWeight.w700),
                                ),
                              ),
                            ],
                          ),
                          Container(
                            padding: EdgeInsets.all(20),
                            width: Utils().getScreenWidth(context),
                            decoration: BoxDecoration(
                              color: Color(0xFF291F62),
                              borderRadius:
                                  const BorderRadius.all(Radius.circular(8.0)),
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  mainAxisAlignment:
                                      MainAxisAlignment.spaceBetween,
                                  children: [
                                    Image.asset(
                                      'images/games/mines/mines-coins.png',
                                      width: 50,
                                    ),
                                    Image.asset(
                                      'images/games/mines/mines-coins2.png',
                                      width: 50,
                                    ),
                                  ],
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 10),
                                  child: Wrap(
                                    spacing: 4,
                                    runSpacing: 10,
                                    children: [
                                      Image.asset(
                                        'images/games/mines/mines-info-item1.png',
                                        width: 70,
                                      ),
                                      Image.asset(
                                        'images/games/mines/mines-info-item1.png',
                                        width: 70,
                                      ),
                                      Image.asset(
                                        'images/games/mines/mines-info-item1.png',
                                        width: 70,
                                      ),
                                      Image.asset(
                                        'images/games/mines/mines-info-item1.png',
                                        width: 70,
                                      ),
                                    ],
                                  ),
                                ),
                                Padding(
                                  padding: EdgeInsets.only(top: 20),
                                  child: Text(
                                    'The larger the number of bombs in the playing field, the higher is the winning ratio',
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 18,
                                        fontWeight: FontWeight.w700),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Column(
                            children: [
                              Container(
                                padding: EdgeInsets.fromLTRB(40, 20, 40, 20),
                                width: Utils().getScreenWidth(context),
                                decoration: BoxDecoration(
                                  color: Color(0xFF291F62),
                                  borderRadius: const BorderRadius.all(
                                      Radius.circular(8.0)),
                                ),
                                child: Column(
                                  children: [
                                    Image.asset(
                                        'images/games/mines/mines-b1.png'),
                                    Padding(
                                      padding: EdgeInsets.only(top: 4),
                                      child: Image.asset(
                                          'images/games/mines/mines-b1.png'),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(top: 4),
                                      child: Image.asset(
                                          'images/games/mines/mines-b2.png'),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(top: 4),
                                      child: Image.asset(
                                          'images/games/mines/mines-b2.png'),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(top: 4),
                                      child: Image.asset(
                                          'images/games/mines/mines-b1.png'),
                                    ),
                                  ],
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 20),
                                child: Text(
                                  'Look for stones, but beware of bombs!',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                      fontWeight: FontWeight.w700),
                                ),
                              ),
                            ],
                          ),
                          Column(
                            children: [
                              Container(
                                padding: EdgeInsets.fromLTRB(40, 20, 40, 20),
                                width: Utils().getScreenWidth(context),
                                decoration: BoxDecoration(
                                  color: Color(0xFF291F62),
                                  borderRadius: const BorderRadius.all(
                                      Radius.circular(8.0)),
                                ),
                                child: Column(
                                  children: [
                                    Image.asset(
                                        'images/games/mines/mines-b3.png'),
                                    Padding(
                                      padding: EdgeInsets.only(top: 4),
                                      child: Image.asset(
                                          'images/games/mines/mines-b3.png'),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(top: 4),
                                      child: Image.asset(
                                          'images/games/mines/mines-b4.png'),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(top: 4),
                                      child: Image.asset(
                                          'images/games/mines/mines-b4.png'),
                                    ),
                                    Padding(
                                      padding: EdgeInsets.only(top: 4),
                                      child: Image.asset(
                                          'images/games/mines/mines-b4.png'),
                                    ),
                                  ],
                                ),
                              ),
                              Padding(
                                padding: EdgeInsets.only(top: 20),
                                child: Text(
                                  'Grab your swag before you blast in a bomb and lose your bet!',
                                  style: TextStyle(
                                      color: Colors.white,
                                      fontSize: 18,
                                      fontWeight: FontWeight.w700),
                                ),
                              ),
                            ],
                          )
                        ],
                      ),
                      _curIndex == 3
                          ? Container(
                              height: 60,
                              width: Utils().getScreenWidth(context),
                              child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xFF5484FF)),
                                  ),
                                  onPressed: () {
                                    Navigator.pop(context);
                                  },
                                  child: Text('Start the game')),
                            )
                          : Container(
                              height: 60,
                              width: Utils().getScreenWidth(context),
                              child: ElevatedButton(
                                  style: ButtonStyle(
                                    backgroundColor: MaterialStateProperty.all(
                                        Color(0xFF5484FF)),
                                  ),
                                  onPressed: () {
                                    setState(() {
                                      _curIndex++;
                                    });
                                    _globalKey.currentState
                                        ?.jumpToPage(_curIndex);
                                  },
                                  child: Text('Next')),
                            )
                    ],
                  )
                : Column(
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Maximum Bet:',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'R\$ 2,000',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.w600),
                          )
                        ],
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Text(
                            'Maximum Payment:',
                            style: TextStyle(
                              color: Colors.white,
                              fontSize: 14,
                            ),
                          ),
                          Text(
                            'R\$ 4,000',
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 14,
                                fontWeight: FontWeight.w600),
                          )
                        ],
                      )
                    ],
                  ),
          ],
        ),
      ),
    );
  }
}
